<template>
  <!-- 店铺海报 -->
  <view class="single-goods-posters">
    <view class="status_bar"><!-- 这里是状态栏 --></view>

    <!-- 画布，隐藏状态，生成海报图片时用 -->
    <view class="ctx">
      <canvas canvas-id="ctx" style="width: 375px; height: 667px"></canvas>
    </view>

    <!-- 编辑海报区 -->
    <view class="edit-poster">
      <!-- 编辑区 -->
      <view
        class="edit-box"
        :style="{ background: `url(${posterValData.url}) 0 0 no-repeat` }"
      >
        <!-- 头部小标题 -->
        <!-- <view class="header-title flex flex-ai-c flex-jc-c">
          <i-icon icon="iconxing" type="mutilple" size="50rpx"></i-icon>
          <text class="text">推荐一款低价车给您，请查收</text>
        </view> -->

        <!-- 大小标题 -->
        <view v-show="titleShow" class="title-box">
          <view class="big-title">
            <input
              type="text"
              v-model="posterData.bigTitle"
              maxlength="7"
              :style="{ color: posterValData.color }"
              class="text"
            />
            <i-icon
              icon="iconquxiaoxunjia"
              color="#DFDFDF"
              @click.native.stop="resetVal('bigTitle')"
            ></i-icon>
          </view>
          <view class="small-title">
            <input
              type="text"
              v-model="posterData.smallTitle1"
              maxlength="12"
              :style="{ color: posterValData.color }"
              class="text"
            />
            <i-icon
              icon="iconquxiaoxunjia"
              color="#DFDFDF"
              @click.native.stop="resetVal('smallTitle1')"
            ></i-icon>
          </view>
        </view>

        <!-- 大图 -->
        <view v-show="titleShow" class="img-box">
          <view class="img" v-show="posterData.img">
            <image :src="posterData.img"></image>
            <i-icon
              icon="iconquxiaoxunjia"
              color="#DFDFDF"
              @click.native.stop="resetVal('img')"
            ></i-icon>
          </view>
          <view class="btn" v-show="!posterData.img" @click="addImg()">
            <u-icon name="plus" :size="80" color="#d6d6d6"></u-icon>
          </view>
        </view>

        <!-- 副标题2 -->
        <view v-show="titleShow" class="title-box">
          <view class="small-title">
            <input
              type="text"
              v-model="posterData.smallTitle2"
              maxlength="14"
              :style="{ color: posterValData.color }"
              class="text"
            />
            <i-icon
              icon="iconquxiaoxunjia"
              color="#DFDFDF"
              @click.native.stop="resetVal('smallTitle2')"
            ></i-icon>
          </view>
        </view>

        <!-- 底部店铺信息 -->
        <view v-show="titleShow" class="store-info flex flex-ai-c flex-jc-sb">
          <view class="info-box flex flex-ai-c">
            <!-- 店铺logo -->
            <view class="logo">
              <image
                :src="topImg||'https://files.yzsheng.com/client/store/store_default.png'"
                mode="scaleToFill"
              ></image>
            </view>

            <!-- 店铺名 -->
            <view class="store-text flex flex-dir-c flex-jc-sb">
              <view class="big-text">{{ storeName || companyName}}</view>
              <view class="small-text">长按识别 进店优惠</view>
            </view>
          </view>

          <!-- 店铺二维码 -->
          <view class="store-qrcode">
            <image :src="posterData.store.qrcode" mode="scaleToFill"></image>
          </view>
        </view>

        <!-- 如果不是第一张背景图，直接显示店铺二维码 -->
        <view v-show="!titleShow" class="store-qrcode-big">
          <view class="img">
            <image :src="posterData.store.qrcode" mode="widthFix"></image>
          </view>
          <view class="text">扫码提升我俩的缘分</view>
        </view>
      </view>
    </view>

    <view class="footer-box">
      <!-- 背景图列表预选 -->
      <view class="bg-img-box">
        <u-loading :show="loadingBgFlag" mode="circle" size="40"></u-loading>

        <view class="bg-img-list">
          <template v-for="(item, index) in bgimglist">
            <view
              :key="item.id"
              :class="[
                'bg-img-item',
                posterValData.id === item.id ? 'bd-active' : '',
              ]"
            >
              <image
                :src="item.url"
                @click="selectBgPoster(item, index)"
                mode="aspectFill"
              ></image>
            </view>
          </template>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="footer-btns flex flex-ai-c">
        <!-- 返回 -->
        <view class="btn-goback" @click="goback()"
          ><u-icon name="arrow-left" size="48" color="#fff"></u-icon
        ></view>

        <view class="btn-box flex flex-ai-c">
          <!-- 更换商品 -->
          <!-- <view v-show="posterData.store.qrcode" class="update-goods" @click="goback()">更换商品</view> -->

          <!-- 分享按钮 -->
          <view class="btn-share" @click="goShare()">
            <i-icon icon="iconshare" size="34rpx" color="#343434"></i-icon>
            <text class="text">去分享</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 分享弹窗选项 -->
    <i-share-popup
      v-model="sharePopupShow"
      @change="handleShare"
      showDownload
    ></i-share-popup>
  </view>
</template>

<script src="./storePoster.js"></script>

<style lang="scss" scoped>
@import './storePoster.scss';
</style>
